<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 1000px;
        }
        svg{
         width: 600px;
        }
    </style>
</head>
<body>
   <div class="box">
    <pre>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red"/>
          </svg>
          <!-- 椭圆 -->
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 600px;">
            <ellipse cx="300" cy="80" rx="100" ry="50"
            style="fill:yellow;stroke:purple;stroke-width:2"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="50" y="20" width="150" height="150"
            style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 600px;">
            <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
            <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
            <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
            <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
          </svg>
          <!-- 直线 -->
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <line x1="0" y1="0" x2="200" y2="200"
            style="stroke:rgb(255,0,0);stroke-width:2"/>
          </svg>          
       </pre>
   </div>
</body>
</html>